<template>
  <div class="page">
    <MNavbar title="资金概览" :back="true" />

    <!-- 概览横幅 -->
    <div class="section">
      <div class="hero-banner" style="background:linear-gradient(135deg,#059669 0%, #10b981 60%, #34d399 100%)">
        <div>
          <div class="hero-title">账户总览</div>
          <div class="hero-sub">收款统计与资金状态</div>
          <div class="hero-actions">
            <button class="btn btn-primary" @click="withdraw">提现</button>
            <router-link class="btn btn-outline" to="/order/list" style="margin-left:12px">查看订单</router-link>
          </div>
        </div>
        <div class="hero-right">
          <svg width="120" height="80" viewBox="0 0 120 80" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="8" y="28" width="104" height="38" rx="8" fill="rgba(255,255,255,0.15)"/>
            <circle cx="36" cy="48" r="14" fill="rgba(255,255,255,0.25)"/>
            <rect x="58" y="40" width="42" height="6" rx="3" fill="rgba(255,255,255,0.35)"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 指标卡（金融风格） -->
    <div class="section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="icon-circle soft-green">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3v18M8 7h5.5a3.5 3.5 0 1 1 0 7H10" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="col"><div class="value">—</div><div class="label">账户余额</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle soft-blue">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 12l6 6L21 6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="col"><div class="value">—</div><div class="label">昨日收入</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle soft-yellow">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
              <path d="M12 7v6l4 2" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="col"><div class="value">—</div><div class="label">待结算</div></div>
        </div>
        <div class="stat-card">
          <div class="icon-circle soft-indigo">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 10l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8z" stroke="currentColor" stroke-width="2"/>
              <path d="M9 21v-6h6v6" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
          <div class="col"><div class="value">—</div><div class="label">已提现</div></div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="section-title">最近结算</div>
      <div class="card">
        <div class="empty-state">暂无记录</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import MNavbar from '@/components/MNavbar.vue'
function withdraw(){ alert('申请提现') }
</script>

